<template>
  <div style="height: 100%; width: 100%; overflow: auto">
    <el-row class="oneThreeRow"
      ><!--未归还-文字-->
      <span class="title">未归还</span>
    </el-row>
    <el-row class="twoFourRow"
      ><!--未归还-表格-->
      <el-table 
      :data="bookNotList" 
      style="width: 100%" 
      :row-class-name="tableRowClassName"
      border
      :cell-style="tableCellStyle"
      :header-cell-style="tableHeaderCellStyle">
        <el-table-column prop="name" label="书籍名称" width="180">
        </el-table-column>
        <el-table-column prop="author" label="作者" width="180">
        </el-table-column>
        <el-table-column prop="output" label="出版社"> 
        </el-table-column>
        <el-table-column prop="num" label="借阅数量"> 
        </el-table-column>
        <el-table-column prop="dateBorrow" label="借阅时间"> 
        </el-table-column>
        <el-table-column prop="status" label="状态"> 
        </el-table-column>
        <el-table-column  label="归还">
          <template slot-scope="scope">
              <button class="waitCost" @click="toCall(scope.row.name)">归还</button>
          </template>
        </el-table-column>
        <el-table-column  label="丢损">
          <template slot-scope="scope">
              <button class="waitCost" @click="toLost(scope.row.name)">丢损</button>
          </template>
        </el-table-column>
       
      </el-table>
    </el-row>
    <el-row class="oneThreeRow"
      ><!--历史记录-文字-->
      <span class="title">历史记录</span>
    </el-row>
    <el-row class="twoFourRow"><!--历史记录-表格--> 
        <el-table 
      :data="bookHistoryList" 
      style="width: 100%" 
      :row-class-name="tableRowClassName"
      border
      :cell-style="tableCellStyle"
      :header-cell-style="tableHeaderCellStyle">
        <el-table-column prop="name" label="书籍名称" width="180">
        </el-table-column>
        <el-table-column prop="author" label="作者" width="180">
        </el-table-column>
        <el-table-column prop="output" label="出版社"> 
        </el-table-column>
        <el-table-column prop="num" label="借阅数量"> 
        </el-table-column>
        <el-table-column prop="dateBorrow" label="借阅时间"> 
        </el-table-column>
        <el-table-column prop="dateCall" label="归还时间"> 
        </el-table-column>
      
      </el-table>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "myBorrow",
  mounted(){
    //获取未归还书籍

  },
  created(){
    this.getBookNotList()
    this.getBookHistoryList()
  },
  data() {
    return {
        border:true,
        userId:'24123',
      //未归还书籍
      bookNotList: [],
      //历史记录
      bookHistoryList: [],
      isBookNotList:false,
      isBookHistoryList:false,
    };
  },
  methods: {
    //设置表格斑马纹颜色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 1) {
        return 'custom_stripe' 
      } else  {
        return ''
      }
    },
    // 修改 table cell边框的背景色 整个表格body
     tableCellStyle () {
       return 'border-color: rgba(204, 204, 204, 1);text-align: center;'
    },
     // 修改 table header cell的背景色  第一行
     tableHeaderCellStyle () {
       return 'border-color: rgba(204, 204, 204, 1); background-color: rgba(168, 189, 203, 0.6);color:rgba(0, 0, 0, 1);text-align: center;'
    },
    //获取未归还图书
     getBookNotList(){
       axios({
        method:'get',
        url:'http://localhost:5000/reader/myborrow/notCall',
        params:{
            'userId':this.userId
        }
       
    }).then(r=>{//发送成功
        this. bookNotList=r.data.data
    }).catch(r=>{
        console.log(r)
    })
    },
    //获取历史借阅书籍
    getBookHistoryList(){
       axios({
        method:'get',
        url:'http://localhost:5000/reader/historyBorrow',
        params:{
            'userId':this.userId
        }
       
    }).then(r=>{//发送成功
        console.log(r)
        this. bookHistoryList=r.data.data
    }).catch(r=>{
        console.log(r)
    })
    },
    toCall(name){
      console.log('call')
      axios({
        method:'get',
        url:'http://localhost:5000/reader/toReturn',
        params:{
            'userId':this.userId,
            'bookName':name,
            'is_lost':'0'
        }
    }).then(r=>{//发送成功
   
        this.$message({
          message: r.data.data,
          type: 'success'
          });
          this.getBookHistoryList()
          this.getBookNotList()
    }).catch(r=>{
        console.log(r)
    })
    },
    toLost(name){
      console.log('call')
      axios({
        method:'get',
        url:'http://localhost:5000/reader/toReturn',
        params:{
            'userId':this.userId,
            'bookName':name,
            'is_lost':'1'
        }
    }).then(r=>{//发送成功
   
        this.$message({
          message: r.data.data,
          type: 'success'
          });
          this.getBookHistoryList()
          this.getBookNotList()
    }).catch(r=>{
        console.log(r)
    })
    }

  
  },
};
</script>

<style scoped>
.oneThreeRow {
  width: 15%;
  height: 6%;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 50px;
  background-color: rgba(237, 209, 209, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.twoFourRow {
  width: 90%;
  margin-left: 50px;
  margin-bottom: 20px;
}
.title {
  font-size: 16px;
  letter-spacing: 2px;
}
::v-deep .custom_stripe {
  background-color:rgba(241, 241, 241, 1);
}
.waitCost{
    height:100%;
    width:50%;
    background-color: rgba(125, 153, 191, 1);
    color:white;
    border-radius: 8px;
    border-color:transparent;
    letter-spacing: 2px;
    cursor: pointer;
}


</style>